<template>
  <div id="key-word">
    <div class="search">
      关键字名称<w-input class="ml28" :validate="false"></w-input>
    </div>
    <h3 class="title"> 关联产品 </h3>
    <!-- 商品或者链接tab切换按钮 -->
    <div class="goods-link">
      <button type="button" class="btns" :class="{active: wordType == 'goods'}" @click="selectGoodsOrLink('goods')">商品</button>
      <button type="button" class="btns" :class="{active: wordType == 'link'}" @click="selectGoodsOrLink('link')">链接</button>
    </div>
    <!-- 商品品类下拉选择（当前是商品） -->
    <div class="class-select" v-show="wordType == 'goods'">
      <div class="select">
        <w-select>女装</w-select>
      </div>
      <div class="select">
        <w-select>女上装</w-select>
      </div>
      <div class="select">
        <w-select>衬衣</w-select>
      </div>
      <div class="input">
        <w-input :validate="false" holder="商品名称 商品编号"></w-input>
      </div>
    </div>
    <!-- 商品品类下拉选择（当前是链接） -->
    <div class="class-select" v-show="wordType == 'link'">
      <w-input class="input-long" :validate="false" holder="商品链接"></w-input>
    </div>
    <w-button class="main search-btn" v-show="wordType == 'goods'">查询</w-button>
    <!-- 添加商品和已选商品选项框 -->
    <div class="add-exists-goods" v-show="wordType == 'goods'">
      <product-group></product-group>
    </div>
  </div>
</template>

<script>
export default {
}
</script>

<style lang="scss" scoped>
  @import './style.scss'
</style>